<template>
	<view class="u-m-l-30 u-m-r-30 u-m-b-50">
		<!-- <u-keyboard mode="number" :mask="false" @change="keyChange" @backspace="backspace"
			v-model="showKeywords"></u-keyboard> -->
		<u-popup v-model="show" mode="center" border-radius="15" closeable="true" close-icon-size="20">
			<view class="u-flex u-flex-wrap u-row-left u-m-15">
				<view class="u-p-20 u-m-r-20" v-for="(item,i) in childrenExp" :key="i" @click="selectOne(i)">
					<view
						:class="['u-bg','u-header','u-flex','u-row-center','u-col-center', selectOneI == i ? 'u-action': '' ]">
						<u-image width="60rpx" height="60rpx" :src="item.icon" shape="circle">
						</u-image>
					</view>
					<view class="u-content-color u-text-center u-font-sm">
						{{item.name}}
					</view>
				</view>
			</view>
		</u-popup>
		<view class="u-flex u-flex-1 u-row-left u-col-center" @click="showSelectClick">
			<u-icon name="http://account-book-cos.1900shop.online/static/images/index/book.png" size="36"></u-icon>
			<text class="u-m-l-6 u-m-r-10 u-font-bold u-font-30">{{selectBook.name || '请选择账本'}}</text>
			<u-icon name="arrow-down" size="24"></u-icon>
		</view>

		<view>
			<view class="u-flex u-col-center u-m-t-20">
				<view class="u-font-40  u-main-color u-m-r-10" @click="showCalendar = true">
					{{$u.date(date,'mm月dd日, yyyy')}}
				</view>
				<view class="u-font-25 u-tips-color u-m-t-10" @click="showCalendar = true">
					{{$u.timeFrom(date)}}
				</view>
			</view>
			<view class="u-m-t-10" @click="showCalendar = true">
				<u-icon name="play-right-fill" size="18" label-size="24" top="1rpx" label="点击更换日期"
					label-pos="left"></u-icon>
			</view>
		</view>
		<view class="u-m-t-20">
			<u-tabs :list="[{name: '收入'}, {name: '支出'}]" height="50" gutter="30" font-size="30" bar-width="30"
				:bold="true" :current="typecur" active-color="#19be6b" @change="typeChange"></u-tabs>
		</view>
		<view class="u-flex u-flex-wrap u-row-left">
			<view class="u-p-20 u-m-r-20" v-for="(item,i) in os_icon_inc" :key="i" @click="select(i)"
				v-if="typecur == 0">
				<view
					:class="['u-bg','u-header','u-flex','u-col-center','u-row-center', selectI == i? 'u-action': '' ]">
					<u-image width="60rpx" height="60rpx" :src="expIcon && selectI == i ?expIcon:item.icon"
						shape="circle" @click="getCategoryExpInfo(i)">
					</u-image>
				</view>
				<view class="u-flex u-flex-wrap u-row-right" v-if="item.isNotExist">
					<u-icon size="20"
						name="http://account-book-cos.1900shop.online/static/images/bookkeeping/点点点.png"></u-icon>
				</view>
				<view class="u-flex u-flex-wrap u-row-right" v-else>
					<u-icon size="20"
						name="http://account-book-cos.1900shop.online/static/images/bookkeeping/无.png"></u-icon>
				</view>
				<view class="u-flex u-flex-wrap u-row-center u-content-color u-text-center u-font-sm">
					{{expName && selectI == i?expName:item.name}}
				</view>
			</view>
			<view class="u-p-20 u-m-r-20" v-for="(item,i) in os_icon_exp" :key="i" @click="select(i)"
				v-if="typecur == 1">
				<view
					:class="['u-bg','u-header','u-flex','u-row-center','u-col-center', selectI == i? 'u-action': '' ]">
					<u-image width="60rpx" height="60rpx" :src="expIcon && selectI == i?expIcon:item.icon"
						shape="circle" @click="getCategoryExpInfo(i)">
					</u-image>
				</view>
				<view class="u-flex u-flex-wrap u-row-right" v-if="item.isNotExist">
					<u-icon size="20"
						name="http://account-book-cos.1900shop.online/static/images/bookkeeping/点点点.png"></u-icon>
				</view>
				<view class="u-flex u-flex-wrap u-row-right" v-else>
					<u-icon size="20"
						name="http://account-book-cos.1900shop.online/static/images/bookkeeping/无.png"></u-icon>
				</view>
				<view class="u-flex u-flex-wrap u-row-center u-content-color u-text-center u-font-sm">
					{{expName && selectI == i || item.id==categoryId ?expName:item.name}}
				</view>
			</view>
		</view>
		<view class="u-p-20 u-m-t-20 u-flex u-row-between u-col-center u-bg">
			<view class="u-flex-1 u-content-color u-font-lg u-text-center">
				金 额
			</view>
			<view class="u-flex-5 height-70 u-text-right" @click="showKeywords = true">
				<input v-model="money" input-align="right" type="digit" placeholder="0.00" maxlength="10" />
			</view>
		</view>
		<view class="u-p-20 u-m-t-20 u-flex u-row-between u-col-center u-bg">
			<view class="u-font-bold-500 u-flex-1 u-content-color u-font-lg u-text-center">
				备 注
			</view>
			<view class="u-flex-5">
				<u-input v-model="remark" input-align="right" type="text" placeholder="请输入内容" maxlength="20"
					confirm-type="提交" />
			</view>
		</view>
		<view class="u-m-t-50">
			<u-button :loading="isLoad" @click="submit" type="success"
				:custom-style="{'border-radius':'20rpx','font-weight':'bold','height':'100rpx','line-height':'100rpx'}"
				throttle-time="500" hover-class="none">提 交</u-button>
		</view>

		<u-select v-model="showSelect" :list="booksInfo" mode="single-column" :default-value="defaultIndex" title="账本"
			value-name="id" label-name="bookName" @confirm="setBook"></u-select>
		<u-calendar v-model="showCalendar" mode="date" @change="calendarChange" :safe-area-inset-bottom="true"
			active-bg-color="#19be6b " btn-type="success"></u-calendar>
	</view>
</template>

<script>
	let _this;
	export default {
		data() {
			return {
				moneyId: '',
				date: '',
				typecur: 1,
				selectI: 0,
				selectOneI: 0,
				defaultIndex: [0],
				ifDefaultIndex: true,
				booksInfo: [],
				remark: '',
				money: '',
				show: false,
				showKeywords: false,
				inpFocus: false,
				showCalendar: false,
				showSelect: false,
				isLoad: false,
				selectBook: '',
				id: '',
				name: '',
				bookUserQuery: {},
				os_icon_exp: [],
				os_icon_inc: [],
				childrenExp: [],
				expIcon: '',
				expName: '',
				expId: '',
				clearOrNot: true
			}
		},
		//只加载一次，监听页面加载，其参数为上个页面传递的数据，参数类型为Object
		onLoad(option) {
			console.log("开始成功" + JSON.stringify(option))
			_this = this;
			_this.date = new Date()
			if (!_this.isEmptyObject(option)) {
				_this.clearOrNot = false
				// ...接下来要做的事....
				_this.selectBook = {
					id: option.bookId,
					name: option.bookName
				}
				_this.remark = option.remark
				_this.money = option.money
				_this.moneyId = option.id
				_this.date = new Date(option.bookTime)
			}
		},
		//监听页面显示。页面每次出现都触发，包括从下级页面点返回露出当前页面
		onShow() {
			if (_this.clearOrNot) {
				_this.remark = ""
				_this.money = ""
				_this.moneyId = ""
				_this.date = new Date()
			}
			_this.clearOrNot = true
			if (_this.os_books.length > 0 && _this.ifDefaultIndex) {

				_this.id = _this.os_books[_this.os_selectbook].id
				_this.name = _this.os_books[_this.os_selectbook].bookName
				_this.selectBook = {
					id: _this.id,
					name: _this.name
				}
				_this.categoryGet()
				_this.bookUserinfo()
			} else {
				_this.getBook()
			}
			_this.booksInfo = _this.os_books
			if (_this.ifDefaultIndex) {
				_this.defaultIndex[0] = _this.os_selectbook
			}
		},
		methods: {
			//点击选择账本
			showSelectClick() {
				_this.showSelect = true
			},
			//获取账本
			async getBook() {
				await _this.$u.api.getBookList().then(res => {
					if (res) {
						_this.$u.vuex('os_books', res)
						res.list.forEach((item, i) => {
							if (item.defaultBook) {
								_this.$u.vuex('os_defbook', i)
							}
						})
						_this.selectBook = {
							id: _this.os_books[_this.os_defbook].id,
							name: _this.os_books[_this.os_defbook].bookName
						}
					} else {
						_this.$u.toast('请先创建账本')
						_this.goTabbarUrl('/pages/app/index')
					}
				})
			},
			//选中分类是否有子分类
			getCategoryExpInfo(i) {
				_this.selectOneI = 0
				if (_this.typecur == 0) {
					_this.childrenExp = _this.os_icon_inc[i].children;
				} else {
					_this.childrenExp = _this.os_icon_exp[i].children;
				}
				if (_this.childrenExp) {
					_this.show = true
				}
			},
			//获取分类信息
			async categoryGet() {
				await _this.$u.api.categoryGet({
					bookId: _this.selectBook.id
				}).then((res) => {
					if (res) {
						_this.os_icon_exp = res.zcCategory
						_this.os_icon_inc = res.srCategory
						_this.expIcon = _this.os_icon_exp[0].icon
						_this.expName = _this.os_icon_exp[0].name
						_this.expId = _this.os_icon_exp[0].categoryId
					}
				})
			},
			//获取账本下当前用户信息
			async bookUserinfo() {
				await _this.$u.api.bookUserinfo({
					bookId: _this.selectBook.id
				}).then((res) => {
					if (res) {
						_this.bookUserQuery = res
					}
				})
			},
			//切换账本
			setBook(e) {
				console.log("切换账本:" + JSON.stringify(e))
				_this.remark = ""
				_this.money = ""
				_this.moneyId = ""
				_this.date = new Date()
				_this.selectBook = {
					id: e[0].value,
					name: e[0].label
				}
				let index = 0;
				for (let i = 0; i < _this.booksInfo.length; i++) {
					if (_this.booksInfo[i].id == e[0].value) {
						index = i;
						break
					}
				}
				_this.defaultIndex[0] = index;
				_this.ifDefaultIndex = false;
				_this.selectI = 0
				_this.expIcon = ''
				_this.expName = ''
				_this.expId = ''
				_this.bookUserinfo()
				_this.categoryGet()
			},
			//选择分类类型
			typeChange(index) {
				_this.typecur = index
				_this.selectI = 0
				if (_this.typecur == 0) {
					_this.expIcon = _this.os_icon_inc[0].icon
					_this.expName = _this.os_icon_inc[0].name
					_this.expId = _this.os_icon_inc[0].categoryId
				} else {
					_this.expIcon = _this.os_icon_exp[0].icon
					_this.expName = _this.os_icon_exp[0].name
					_this.expId = _this.os_icon_exp[0].categoryId
				}
			},
			//选中分类
			select(i) {
				_this.selectI = i
				if (_this.typecur == 0) {
					_this.expIcon = _this.os_icon_inc[i].icon
					_this.expName = _this.os_icon_inc[i].name
					_this.expId = _this.os_icon_inc[i].categoryId
				} else {
					_this.expIcon = _this.os_icon_exp[i].icon
					_this.expName = _this.os_icon_exp[i].name
					_this.expId = _this.os_icon_exp[i].categoryId
				}
			},
			//子分类选中
			selectOne(i) {
				_this.selectOneI = i
				_this.expIcon = _this.childrenExp[i].icon
				_this.expName = _this.childrenExp[i].name
				_this.expId = _this.childrenExp[i].categoryId
				_this.show = false
			},
			//提交订单
			async submit() {
				_this.isLoad = true
				let params = {
					type: _this.typecur
				}
				if (!_this.expIcon) {
					_this.$u.toast('请选择图标')
					_this.isLoad = false
					return
				}
				if (!_this.money) {
					_this.$u.toast('请输入金额')
					_this.isLoad = false
					return
				}
				if (!_this.selectBook) {
					_this.$u.toast('请选择账本')
					_this.isLoad = false
					return
				}
				if (_this.moneyId) {
					//更新账单
					await _this.$u.api.updateMoney({
						id: _this.moneyId,
						type: _this.typecur,
						categoryId: _this.expId,
						categoryName: _this.expName,
						avatarUrl: _this.expIcon,
						bookId: _this.selectBook.id,
						money: _this.money,
						remark: _this.remark,
						userId: _this.bookUserQuery.id,
						userName: _this.bookUserQuery.reallyName,
						bookTime: _this.$u.timeFormat(_this.date)
					}).then((res) => {
						uni.hideLoading()
						_this.isLoad = false
						_this.goTabbarUrl('/pages/app/index')
					})
				} else {
					//新增账单保存
					await _this.$u.api.saveMoney({
						type: _this.typecur,
						categoryId: _this.expId,
						categoryName: _this.expName,
						avatarUrl: _this.expIcon,
						bookId: _this.selectBook.id,
						money: _this.money,
						remark: _this.remark,
						userId: _this.bookUserQuery.id,
						userName: _this.bookUserQuery.reallyName,
						bookTime: _this.$u.timeFormat(_this.date)
					}).then((res) => {
						uni.hideLoading()
						_this.isLoad = false
						_this.goTabbarUrl('/pages/app/index')
					})
				}
			},
			//跳转到页面关闭其他页面
			goTabbarUrl(path) {
				uni.switchTab({
					url: path
				});
			},
			//键盘
			keyChange(val) {
				_this.money += val;
			},
			backspace() {
				if (_this.money.length) _this.money = _this.money.substr(0, _this.money.length - 1);
			},
			//日历选择
			calendarChange(e) {
				_this.date = new Date(e.result)
			},
			//判断对象是否为空
			isEmptyObject(obj) {
				return Object.keys(obj).length === 0
			}
		}
	}
</script>

<style lang="scss">
	.u-bg {
		background-color: $u-bg-color;
	}

	.content {
		padding: 24rpx;
		text-align: center;
	}

	.u-header {
		width: 70rpx;
		height: 70rpx;
		overflow: hidden;
		margin: 0 auto;
		border-radius: 20px;
		border: 3rpx solid $u-type-success-disabled;
	}

	.u-action {
		border: 3rpx solid $u-type-success;
	}

	.height-70 {
		min-height: 70rpx;
		line-height: 70rpx;
	}
</style>